<template>
  <view>
    <view class="top-input-search">
      <tn-input v-model="searchText" :custom-style="{paddingLeft:'40rpx'}" :focus="true" class="inner-input"
                placeholder="搜索内容"
                @click="touchInput"/>
      <tn-button backgroundColor="#0081ff" class="inner-button" fontColor="#feffff" shape="round" @click="touchInput">
        搜索
      </tn-button>
    </view>
    <tn-grid align="center" col="1">
      <tn-grid-item v-for="(item) in paperList" :key="item.id" style="width: 100%" @click="toDetail(item.id)">
        <view class="grid-item">
          <view class="order-status">
            <tn-tag :backgroundColor="tabInfo.bgColor" :fontColor="tabInfo.fontColor" shape="circle">{{
                forStatus(item)
              }}
            </tn-tag>
          </view>
          <view class="grid-item-top">
            <view class="grid-item-title">{{ item.title }}</view>
            <view class="grid-item-price">{{ item.totalPrice }}元</view>
          </view>
          <view class="grid-item-toolTag">
            <text class="tn-icon-topics grid-item-toolTag-icon"></text>
            <span v-for="tech in item.techList" :key="tech">{{ getTech(tech) }}</span>
          </view>
          <view class="grid-item-userTag">
            <tn-tag v-for="(tag) in item.servicesList" :key="tag" backgroundColor="tn-cool-bg-color-7" fontColor="tn-color-white"
                    margin="10rpx 6rpx" shape="radius">{{ getServers(tag) }}
            </tn-tag>
          </view>
        </view>
      </tn-grid-item>
    </tn-grid>
  </view>
</template>

<script>
import {getPaperListQuery} from "@/api";

export default {
  data() {
    return {
      searchText: '',
      paperList: [],
      techDict: {},
      serversDict: {},
      tabInfo: {
        bgColor: '',
        fontColor: ""
      }
    };
  },
  async mounted() {
    await uni.getStorage({
      key: 'techDict',
      success: (res) => {
        console.log(res, 'techDict')
        this.techDict = res.data
      }
    })
    await uni.getStorage({
      key: 'serversDict',
      success: (res) => {
        console.log(res, 'serversDict')
        this.serversDict = res.data
      }
    })
    await this.getPaperList()
  },
  methods: {
    forStatus(item) {
      const tabInfo = {
        bgColor: '',
        fontColor: ""
      }
      this.tabInfo = tabInfo
      switch (item.orderPayStatus) {
        case 3:
          tabInfo.bgColor = 'rgba(24,144,255,0.38)'
          tabInfo.fontColor = '#1890FF'
          return '已交易'
        case 1:
          tabInfo.fontColor = '#FA8C16'
          tabInfo.bgColor = 'rgba(250,140,22,0.38)'
          return '待付款'
        case 4:
          tabInfo.fontColor = '#F5222D'
          tabInfo.bgColor = 'rgba(250,140,22,0.38)'
          return '未结尾款'
        case 5:
          tabInfo.fontColor = '#333333'
          tabInfo.bgColor = 'rgba(51,51,51,0.38)'
          return '交易结束'
      }
    },
    async getPaperList() {
      try {
        const res = await getPaperListQuery({
          pageNum: 1,
          pageSize: 5,
        })
        this.paperList = res.data?.records ?? []
        this.paperList.forEach(item => {
          item.techList = item.technicalSelection.split(',')
          item.servicesList = item.includingServices.split(',')
        })
      } catch (e) {
        console.log(e)
      }
    },
    //技术选型字典转换
    getTech(techKey) {
      return this.techDict[techKey]
    },
    getServers(serversKey) {
      return this.serversDict[serversKey]
    },

    //点击搜索部分跳转
    touchInput() {
      // uni.navigateTo({
      //   url: '/pages/main/search'
      // })
    },
    toDetail(id) {
      uni.navigateTo({
        url: `detail?id=${id}`,

      })
    }
  }


}
</script>

<style lang="scss">
.top-input-search {
  display: flex;
  justify-content: start;
  align-items: center;
  padding: 20rpx 10rpx 20rpx 20rpx;

  .inner-input {
    background-color: #f5f5f5;
    border-radius: 120rpx;
    flex: 10;
  }

  .inner-button {
    margin-left: 14rpx;
    flex: 2;
  }
}

.grid-item {
  //border-bottom: 2rpx solid #d3cfcf;
  margin-top: 20rpx;
  padding: 0 20rpx;
  width: 100%;

  .grid-item-top {
    display: flex;
    justify-content: space-between;

    .grid-item-title {
      font-size: 30rpx;
      font-weight: bold;
    }

    .grid-item-price {

    }
  }

  .grid-item-toolTag {
    color: #918e8e;
    display: table-cell;
    vertical-align: middle;
    margin-top: 10rpx;

    .grid-item-toolTag-icon {
      margin: 0 6rpx;
    }
  }


}

</style>
